<template>
  <div class="from">
    <div class="title">
      {{$t('ContainerInfo_ContainerInformation')}}
<!--      ContainerInformation:"容器信息",-->
    </div>
    <div v-if="item">
      <div class="item">
        <span>{{$t('ContainerInfo_imaegs')}}</span>
<!--        <span>镜像</span>-->
        <div>{{ item.Image }}</div>
      </div>
      <div class="item">
        <span>{{$t('ContainerInfo_Port')}}</span>
        <div v-html="this.port(item)"></div>
      </div>
      <div class="item">
        <span>{{$t('ContainerInfo_CMD')}}</span>
        <div>{{ item.Config.Cmd ? item.Config.Cmd.join(' ') : 'Null' }}</div>
      </div>
      <div class="item">
        <span>{{$t('ContainerInfo_ContainerName')}}</span>
        <div>{{ item.Config.Entrypoint ? item.Config.Entrypoint.join(' ') : 'Null' }}</div>
      </div>
      <div class="item">
        <span>{{$t('ContainerInfo_Env')}}</span>
        <div v-html="itemEnv(item.Config.Env)"></div>
      </div>
      <div class="item">
        <span>{{$t('ContainerInfo_Label')}}</span>
        <div v-html="itemLabels(item.Config.Labels)">{{ item.Config.Labels }}</div>
      </div>
      <div class="item">
        <span>{{$t('ContainerInfo_RestartStrategy')}}</span>
        <div>
          <el-form :inline="true" class="demo-form-inline" size="small" style="padding-top: 15px; box-sizing: border-box;">
            <el-form-item label="">
              <el-select v-model="Restart" :placeholder="$t('ContainerInfo_always')" size="small">
                <el-option label="never" value="no"></el-option>
                <el-option label="always" value="always"></el-option>
                <el-option label="on-failure" value="on-failure"></el-option>
                <el-option label="unless-stopped" value="unless-stopped"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="Restart === 'on-failure'" :label="$t('ContainerInfo_Restarttimes')">
              <el-input type="Number" v-model.trim="RestartNum" :placeholder="$t('ContainerInfo_Restarttimes')" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="background: #067FB5; margin-left: 20px; color: #fff" size="small" @click="chengeRestartPolicy">{{$t('ContainerInfo_toupdate')}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  data () {
    return {
      Restart: '', // 重启策略
      RestartNum: 0 // 重启次数
    }
  },
  props: ['item'],
  watch: {
    item: function () {
      if (this.item) {
        this.Restart = this.item.HostConfig.RestartPolicy.Name
        this.RestartNum = this.item.HostConfig.RestartPolicy.MaximumRetryCount
      }
    }
  },
  methods: {
    // 更新重启策略 - ！！！请求判断是否成功有bug！！！ - 现在应该没bug了。。
    chengeRestartPolicy () {
      let data = ''
      if (this.Restart !== 'on-failure') {
        data = `{"RestartPolicy": {"Name":"${this.Restart}"}}`
      } else {
        data = `{"RestartPolicy": {"MaximumRetryCount": ${this.RestartNum}, "Name":"${this.Restart}"}}`
      }
      const docker = `curl --unix-socket /var/run/docker.sock -s -H "Content-Type:application/json" -d '${data}' -X POST "http:/v1.40/containers/${this.item.Id}/update"` // 修改容器
      post({ docker }, res => {
        if (res.message) {
          return this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message: '重启策略修改成功',
          type: 'success'
        })
      }, this)
    },
    // 展示labels处理
    itemLabels (value) {
      let  str = ''
      if (JSON.stringify(value) !== '{}') {
        for (let key in value) {
          str += key + ' : ' + value[key] + '</br>'
        }
      } else {
        str = 'Null'
      }
      return str
    },
    // 展示Env处理
    itemEnv (value) {
      if (value) {
        return value.join('</br>')
      } else {
        return 'Null'
      }
    },
    // 展示端口处理
    port (value) {
      let str = ''
      for (let key in value.NetworkSettings.Ports) {
        if (value.NetworkSettings.Ports[key]) {
          str += value.NetworkSettings.Ports[key][0].HostIp + ':' + value.NetworkSettings.Ports[key][0].HostPort + ' - ' + key + '</br>'
        } else {
          str += key + '</br>'
        }
      }
      return str
    }
  }
}
</script>

<style lang="scss" scoped>
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 0px 10px;
  margin: 30px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
.item{
  padding: 2px;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  span{
    font-size: 16px;
    color: #067FB5;
    width: 120px;
    flex-shrink: 0;
    line-height: 40px;
    align-self: center;
    display: inline-block;
    border-radius: 5px;
    border: #067FB5 1px solid;
    text-align: center;
    margin-right: 30px;
    background: #fff;
  }
  div{
    line-height: 25px;
    font-size: 13px;
    align-self: center;
  }
}
.item:nth-child(2n-1){
  background: #fff;
  span{
    background: #F7FCFF;
  }
}
</style>
